<template>
    <div>
        <footer class="footer" v-cloak v-if="todoList.length">
            <span class="todo-count">
                <strong>{{filterTodoList.length}}</strong> 剩余项
            </span>
            <ul class="filters">
                <li><a href="javascript:;">全部</a></li>
                <li><a href="javascript:;">未完成</a></li>
                <li><a href="javascript:;">已完成</a></li>
            </ul>
            <button 
            class="clear-completed">
            清除已完成
            </button>
        </footer>
    </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState("todolist", ["todoList"]),
    filterTodoList() {
      return this.todoList.filter(v => !v.isCheck);
    }
  }
};
</script>

<style scoped src="../assets/style/todolist.css">
</style>